<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" shape="round" />

    <!-- 热门搜索 -->
    <div class="search_wrap" v-if="resultList.length === 0">
      <p class="hot_title">热门搜索</p>
      <!-- 关键字 -->
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          v-for="obj in hotList"
          :key="obj.id"
          @click="hotSearchItem(obj.first)"
        >
          {{ obj.first }}
        </li>
      </ul>
    </div>

    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <SongItem 
        v-for="obj in resultList" 
        :key="obj.id"
        :author="obj.ar[0].name"
        :id="obj.id"
        :name="obj.name"
      ></SongItem>
    </div>
  </div>
</template>

<script>
import {hotSearchAPI, searchResultListAPI} from "@/api"
import SongItem from "@/components/SongItem"

export default {
  data() {
    return {
      searchValue: '',
      hotList: [], // 热搜关键字
      resultList: [], // 搜索结果
      timer: null,
    };
  },
  async created() {
    // 热门搜索
    const res = await hotSearchAPI()
    // console.log(res.data.result.hots);
    this.hotList = res.data.result.hots
  },
  methods: {
    async hotSearchItem(value) {
      // 点击后，把搜索内容给输入框显示
      this.searchValue = value

      const res =  await searchResultListAPI({
          type: 1,
          keywords: this.searchValue
      })
      this.resultList = res.data.result.songs
      setTimeout(()=>{
        clearTimeout(this.timer) // 防止下面的请求再次执行
      })

    }
  },
  watch:{
    // 防抖: n秒内，最后执行一次 （补充:函数在n秒内重新执行，则重新计时）
    // 节流: 间隔n秒，执行一次
    searchValue(val) {
      clearTimeout(this.timer) // 防止输入框为空时，还回收到数据
      // 输入框长度为0时，清空
      if(val.length === 0) return this.resultList = []
      this.timer = setTimeout(async  () => {
        // 搜索框里面的值改变，立即执行
        const res =  await searchResultListAPI({
          type: 1,
          keywords: val
        })
        // console.log(res.data.result.songs);
        this.resultList = res.data.result.songs
      }, 1000);
       
    }
  },
  components: {
    SongItem
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-field__control {
  font-size: 14px !important;
}

/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
